<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>心理咨询 - 智联医防服务平台</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">


    <style>
        :root {
            --primary: #165DFF;
            --secondary: #36D399;
            --accent: #FF9F43;
            --dark: #1E293B;
            --light: #F8FAFC;
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            padding-top: 80px;
        }

        .bg-gradient-blue {
            background: linear-gradient(135deg, var(--primary) 0%, #0F4C81 100%);
        }

        .nav-link {
            position: relative;
            color: var(--dark) !important;
            font-weight: 500;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--primary) !important;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

        .section-title {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            margin-bottom: 2.5rem;
        }

        .footer {
            background-color: var(--dark);
            color: white;
            padding-top: 4rem;
            padding-bottom: 2rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .profile-dropdown {
            display: none;
            position: absolute;
            right: 0;
            top: 100%;
            width: 240px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            padding: 0.5rem 0;
        }

        .show-dropdown:hover .profile-dropdown {
            display: block;
        }

        .nav-shadow {
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        .navbar {
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
        }

        .record-item {
            border-left: 3px solid var(--primary);
            padding-left: 15px;
            margin-bottom: 25px;
        }

        .health-metric {
            height: 100%;
        }

        .record-detail {
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
        }

        .metric-card {
            border-radius: 12px;
            overflow: hidden;
            height: 100%;
        }

        /* 轮番图 */
        /* 轮播图自定义样式 */
        #mentalHealthCarousel {
            height: 100%;
        }

        .carousel-inner {
            border-radius: 0 0 0.375rem 0.375rem;
        }

        .carousel-indicators button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 5px;
            background-color: rgba(0, 0, 0, 0.2);
        }

        .carousel-indicators .active {
            background-color: #0d6efd;
        }

        /* 心理健康内容样式 */
        .mental-health-tip {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .mental-health-tip img {
            max-height: 120px;
        }
    </style>
</head>

<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3 nav-shadow">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="index.html">
                <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                    style="width: 40px; height: 40px;">
                    <i class="fas fa-heartbeat text-white fs-5"></i>
                </div>
                <span class="fs-4 fw-bold text-primary">智联医防</span>
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="index.html">首页</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="ai-consultation.html">AI问诊</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="medical-science.html">医学科普</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link active" href="mental-health.html">心理健康</a>
                    </li>
                    <li class="nav-item mx-2">
                        <a class="nav-link" href="e-record.html">电子档案</a>
                    </li>
                </ul>

                <div class="d-flex align-items-center position-relative show-dropdown">
                    <a href="profile.html" class="d-flex align-items-center text-decoration-none">
                        <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="rounded-circle me-2"
                            style="width: 40px; height: 40px; border: 2px solid var(--primary);">
                        <span class="d-none d-md-inline fw-medium me-1">张明阳</span>
                        <i class="fas fa-angle-down text-muted"></i>
                    </a>

                    <div class="profile-dropdown">
                        <a href="profile.html" class="dropdown-item py-2">
                            <i class="far fa-user me-2"></i>个人资料
                        </a>
                        <a href="#" class="dropdown-item py-2">
                            <i class="fas fa-cog me-2"></i>设置
                        </a>
                        <hr class="dropdown-divider">
                        <a href="#" class="dropdown-item py-2 text-danger">
                            <i class="fas fa-sign-out-alt me-2"></i>退出登录
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 心理健康 -->
    <section id="mental-health" class="py-5 bg-light">
        <div class="container py-5">
            <div class="text-center mb-5">
                <h2 class="section-title text-dark">
                    心理健康<span class="text-primary">自查服务</span>
                </h2>
                <p class="text-muted fs-5 mx-auto" style="max-width: 700px;">
                    我们提供专业的心理健康测评工具，帮助您了解自己的心理状态。同时，我们也提供远程心理咨询服务，让专业的心理医生为您提供帮助。
                </p>
            </div>

            <div class="row g-5">
                <div class="col-lg-6">
                    <div class="mb-5">
                        <h3 class="h3 fw-semibold mb-3">心理健康测评</h3>
                        <p class="text-muted">
                            我们的心理健康测评工具由专业心理医生团队开发，包含多种心理量表，可以全面评估您的心理健康状况。
                        </p>
                    </div>
                    <div class="mb-4">
                        <!-- 抑郁自评量表 -->
                        <div class="card feature-card card-hover mb-4">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                        style="width: 48px; height: 48px;">
                                        <i class="fas fa-heart text-primary fs-4"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h4 class="h5 fw-medium">抑郁自评量表</h4>
                                        <p class="text-muted small mb-0">评估您的抑郁情绪程度，帮助您了解自己的情绪状态。</p>
                                    </div>
                                </div>
                                <div class="text-end mt-3">
                                    <a href="#" class="btn btn-primary btn-sm px-4 py-2 rounded-pill start-test"
                                        data-test="depression">
                                        <i class="fas fa-pencil-alt me-2"></i>开始测评
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 焦虑自评量表 -->
                        <div class="card feature-card card-hover mb-4">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                        style="width: 48px; height: 48px;">
                                        <i class="fas fa-balance-scale text-primary fs-4"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h4 class="h5 fw-medium">焦虑自评量表</h4>
                                        <p class="text-muted small mb-0">评估您的焦虑程度，帮助您了解自己的焦虑状况。</p>
                                    </div>
                                </div>
                                <div class="text-end mt-3">
                                    <a href="#" class="btn btn-primary btn-sm px-4 py-2 rounded-pill start-test"
                                        data-test="anxiety">
                                        <i class="fas fa-pencil-alt me-2"></i>开始测评
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 睡眠质量评估 -->
                        <div class="card feature-card card-hover mb-4">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                        style="width: 48px; height: 48px;">
                                        <i class="far fa-moon text-primary fs-4"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h4 class="h5 fw-medium">睡眠质量评估</h4>
                                        <p class="text-muted small mb-0">评估您的睡眠质量，帮助您了解自己的睡眠状况。</p>
                                    </div>
                                </div>
                                <div class="text-end mt-3">
                                    <a href="#" class="btn btn-primary btn-sm px-4 py-2 rounded-pill start-test"
                                        data-test="sleep">
                                        <i class="fas fa-pencil-alt me-2"></i>开始测评
                                    </a>
                                </div>
                            </div>
                        </div>

                        <!-- 生活满意度评估 -->
                        <div class="card feature-card card-hover">
                            <div class="card-body">
                                <div class="d-flex">
                                    <div class="bg-primary bg-opacity-10 rounded-circle flex-shrink-0 d-flex align-items-center justify-content-center me-4"
                                        style="width: 48px; height: 48px;">
                                        <i class="far fa-smile text-primary fs-4"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <h4 class="h5 fw-medium">生活满意度评估</h4>
                                        <p class="text-muted small mb-0">评估您对生活的满意度，帮助您了解自己的生活状态。</p>
                                    </div>
                                </div>
                                <div class="text-end mt-3">
                                    <a href="#" class="btn btn-primary btn-sm px-4 py-2 rounded-pill start-test"
                                        data-test="satisfaction">
                                        <i class="fas fa-pencil-alt me-2"></i>开始测评
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 测评弹窗 -->
                    <div class="modal fade" id="testModal" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="testModalTitle">测评标题</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <form id="testForm">
                                        <div id="questionsContainer"></div>
                                        <div class="text-center mt-4">
                                            <button type="submit" class="btn btn-primary px-4">提交测评</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-primary d-flex">
                        <i class="fas fa-info-circle me-3 mt-1 fs-4 text-primary"></i>
                        <div>
                            <h4 class="alert-heading">温馨提示</h4>
                            <p class="mb-0">心理测评结果仅供参考，不能替代专业诊断。如有严重心理问题，请及时寻求专业帮助。</p>
                        </div>
                    </div>
                </div>

                <!-- 远程心理咨询 -->
                <!-- <div class="col-lg-6">
                    <div class="card feature-card">
                        <div class="bg-gradient-blue text-white p-4">
                            <h3 class="h5 fw-semibold mb-1">远程心理咨询</h3>
                            <p class="text-white-50 mb-0">与专业心理医生进行在线沟通，获取专业帮助</p>
                        </div>
                        <div class="card-body p-4">
                            <div class="mb-4">
                                <label class="form-label">咨询主题</label>
                                <select class="form-select">
                                    <option>请选择咨询主题</option>
                                    <option>抑郁情绪</option>
                                    <option>焦虑问题</option>
                                    <option>睡眠障碍</option>
                                    <option>人际关系</option>
                                    <option>工作压力</option>
                                    <option>家庭问题</option>
                                    <option>其他问题</option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">问题描述</label>
                                <textarea class="form-control" rows="4" placeholder="请简要描述您的问题..."></textarea>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">选择咨询方式</label>
                                <div class="row g-2">
                                    <div class="col-md-6">
                                        <button class="btn btn-outline-secondary w-100">
                                            <i class="fas fa-video me-2"></i>视频咨询
                                        </button>
                                    </div>
                                    <div class="col-md-6">
                                        <button class="btn btn-outline-secondary w-100">
                                            <i class="fas fa-phone me-2"></i>语音咨询
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-4">
                                <label class="form-label">选择咨询师</label>
                                <div class="list-group">
                                    <div class="list-group-item d-flex align-items-center p-3">
                                        <img src="https://picsum.photos/id/1027/100/100" alt="张医生"
                                            class="rounded-circle me-3" style="width: 48px; height: 48px;">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">张医生</h6>
                                            <p class="text-muted small mb-0">临床心理学专家，15年经验</p>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted me-3">￥300/小时</span>
                                            <input type="radio" name="counselor" class="form-check-input">
                                        </div>
                                    </div>

                                    <div class="list-group-item d-flex align-items-center p-3">
                                        <img src="https://picsum.photos/id/1062/100/100" alt="李医生"
                                            class="rounded-circle me-3" style="width: 48px; height: 48px;">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">李医生</h6>
                                            <p class="text-muted small mb-0">心理咨询师，10年经验</p>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted me-3">￥250/小时</span>
                                            <input type="radio" name="counselor" class="form-check-input">
                                        </div>
                                    </div>

                                    <div class="list-group-item d-flex align-items-center p-3">
                                        <img src="https://picsum.photos/id/1074/100/100" alt="王医生"
                                            class="rounded-circle me-3" style="width: 48px; height: 48px;">
                                        <div class="flex-grow-1">
                                            <h6 class="mb-0">王医生</h6>
                                            <p class="text-muted small mb-0">婚姻家庭咨询师，8年经验</p>
                                        </div>
                                        <div class="d-flex align-items-center">
                                            <span class="text-muted me-3">￥280/小时</span>
                                            <input type="radio" name="counselor" class="form-check-input">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <button class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                                <i class="far fa-calendar-check me-2"></i>预约咨询
                            </button>
                        </div>
                    </div>
                </div> -->

                <!--  -->
                <div class="col-lg-6">
                    <div class="card feature-card h-100">
                        <!-- 标题区域（保持相同样式） -->
                        <div class="bg-gradient-blue text-white p-4 rounded-top">
                            <h3 class="h5 fw-semibold mb-1">心理健康小贴士</h3>
                            <p class="text-white-50 mb-0">专业心理知识，助您保持良好心态</p>
                        </div>

                        <!-- 心理健康轮播图 -->
                        <div id="mentalHealthCarousel" class="carousel slide h-100" data-bs-ride="carousel">
                            <div class="carousel-inner h-100">
                                <!-- 心理健康知识1 -->
                                <div class="carousel-item active h-100">
                                    <div class="card-body p-4 d-flex flex-column h-100">
                                        <div class="text-center mb-4">
                                            <img src="./images/健康小贴士1.png" alt="心理健康" class="img-fluid mb-3">
                                            <!-- <h5 class="mb-3">情绪管理技巧</h5> -->
                                        </div>
                                        <div class="flex-grow-1">
                                            <ul class="list-unstyled">
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-heart text-primary me-3 mt-1"></i>
                                                    <span>每天记录3件感恩的事，培养积极心态</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-heart text-primary me-3 mt-1"></i>
                                                    <span>情绪波动时尝试深呼吸练习（4-7-8呼吸法）</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-heart text-primary me-3 mt-1"></i>
                                                    <span>与信任的人分享感受，不要独自承受压力</span>
                                                </li>
                                                <li class="d-flex">
                                                    <i class="fas fa-heart text-primary me-3 mt-1"></i>
                                                    <span>每天保证7-9小时优质睡眠</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- 心理健康知识2 -->
                                <div class="carousel-item h-100">
                                    <div class="card-body p-4 d-flex flex-column h-100">
                                        <div class="text-center mb-4">
                                            <img src="./images/健康小贴士2.png" alt="压力管理" class="img-fluid mb-3">
                                            <!-- <h5 class="mb-3">压力缓解方法</h5> -->
                                        </div>
                                        <div class="flex-grow-1">
                                            <ul class="list-unstyled">
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-spa text-primary me-3 mt-1"></i>
                                                    <span>每天进行20分钟正念冥想练习</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-spa text-primary me-3 mt-1"></i>
                                                    <span>定期进行有氧运动（如快走、游泳）</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-spa text-primary me-3 mt-1"></i>
                                                    <span>建立健康的作息规律，避免熬夜</span>
                                                </li>
                                                <li class="d-flex">
                                                    <i class="fas fa-spa text-primary me-3 mt-1"></i>
                                                    <span>学会说"不"，合理设置个人边界</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                <!-- 心理健康知识3 -->
                                <div class="carousel-item h-100">
                                    <div class="card-body p-4 d-flex flex-column h-100">
                                        <div class="text-center mb-4">
                                            <img src="./images/健康小贴士3.png" alt="自我关怀" class="img-fluid mb-3">
                                            <!-- <h5 class="mb-3">自我关怀建议</h5> -->
                                        </div>
                                        <div class="flex-grow-1">
                                            <ul class="list-unstyled">
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-hands-helping text-primary me-3 mt-1"></i>
                                                    <span>每天给自己15分钟独处时间，做喜欢的事</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-hands-helping text-primary me-3 mt-1"></i>
                                                    <span>培养至少一个放松身心的爱好</span>
                                                </li>
                                                <li class="mb-3 d-flex">
                                                    <i class="fas fa-hands-helping text-primary me-3 mt-1"></i>
                                                    <span>减少社交媒体使用时间，避免比较心理</span>
                                                </li>
                                                <li class="d-flex">
                                                    <i class="fas fa-hands-helping text-primary me-3 mt-1"></i>
                                                    <span>定期进行自我肯定练习</span>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 轮播控制按钮 -->
                            <button class="carousel-control-prev" type="button" data-bs-target="#mentalHealthCarousel"
                                data-bs-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Previous</span>
                            </button>
                            <button class="carousel-control-next" type="button" data-bs-target="#mentalHealthCarousel"
                                data-bs-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="visually-hidden">Next</span>
                            </button>

                            <!-- 轮播指示器 -->
                            <div class="carousel-indicators position-relative mb-0" style="bottom: auto; top: -30px;">
                                <button type="button" data-bs-target="#mentalHealthCarousel" data-bs-slide-to="0"
                                    class="active" aria-current="true"></button>
                                <button type="button" data-bs-target="#mentalHealthCarousel"
                                    data-bs-slide-to="1"></button>
                                <button type="button" data-bs-target="#mentalHealthCarousel"
                                    data-bs-slide-to="2"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row g-5 mb-5">
                <div class="col-lg-4">
                    <div class="d-flex align-items-center mb-4">
                        <div class="bg-gradient-blue rounded-lg d-flex align-items-center justify-content-center me-2"
                            style="width: 40px; height: 40px;">
                            <i class="fas fa-heartbeat text-white"></i>
                        </div>
                        <span class="fs-4 fw-bold text-white">智联医防</span>
                    </div>
                    <p class="text-white-50 mb-4">
                        我们致力于提供便捷、专业的医疗健康服务，让每个人都能享受到高质量的医疗资源。
                    </p>
                    <div class="d-flex">
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle me-2" style="width: 40px; height: 40px;">
                            <i class="fab fa-qq"></i>
                        </a>
                        <a href="#" class="btn btn-light btn-sm rounded-circle" style="width: 40px; height: 40px;">
                            <i class="fab fa-youtube"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-2">
                    <h5 class="text-white mb-4">快速链接</h5>
                    <ul class="list-unstyled footer-links">
                        <li class="mb-2"><a href="index.html">首页</a></li>
                        <li class="mb-2"><a href="ai-consultation.html">AI问诊</a></li>
                        <li class="mb-2"><a href="medical-science.html">医学科普</a></li>
                        <li class="mb-2"><a href="mental-health.html">心理健康</a></li>
                        <li class="mb-2"><a href="e-record.html">电子档案</a></li>
                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4"><a href="https://zwfw.nhc.gov.cn/cxx/"
                            class="text-white"></a>基层医疗信息查询</a></h5>
                    <ul class="list-unstyled footer-links">
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary mt-1 me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/wsbzxx/wsbz.shtml"
                                    class="text-white">卫生标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://sppt.cfsa.net.cn:8086/db" class="text-white">食品安全国家标准查询</a></span>
                        </li>
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://www.nhc.gov.cn/wjw/jbywml/list.shtml"
                                    class="text-white">基本药物目录查询</a></span>
                        </li>
                        <!-- <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywcx/ygptcx/"
                                    class="text-white">药物平台管理查询</a></span>
                        </li> -->
                        <li class="d-flex mb-3">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/qtcx/gjwsczcx/"
                                    class="text-white">国家卫生城镇查询</a></span>
                        </li>
                        <li class="d-flex">
                            <i class="fas fa-map-marker-alt text-primary me-3"></i>
                            <span><a href="https://zwfw.nhc.gov.cn/cxx/ywjgcx/qgyzjg/"
                                    class="text-white">医卫机构查询</a></span>
                        </li>

                    </ul>
                </div>

                <div class="col-lg-3">
                    <h5 class="text-white mb-4">医疗信息查询</h5>
                    <p class="text-white-50 mb-4">
                        查询权威医疗数据，获取最新公共卫生服务信息
                    </p>
                    <form>
                        <div class="mb-3">
                            <input type="email" class="form-control bg-dark border-dark text-white"
                                placeholder="您的邮箱地址">
                        </div>
                        <button type="submit" class="btn btn-primary w-100 py-3 rounded-pill shadow-lg">
                            <i class="fas fa-search me-2"></i>立即查询
                        </button>
                    </form>
                </div>
            </div>

            <div class="border-top border-gray-800 pt-4">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
                    <p class="text-white-50 mb-3 mb-md-0">
                        &copy; 2025 智联医防服务平台. 保留所有权利.
                    </p>
                    <div class="d-flex">
                        <a href="#" class="text-white-50 me-3">隐私政策</a>
                        <a href="#" class="text-white-50 me-3">服务条款</a>
                        <a href="#" class="text-white-50 me-3">免责声明</a>
                        <a href="#" class="text-white-50">帮助中心</a>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>


    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function () {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 100) {
                navbar.classList.add('shadow');
            } else {
                navbar.classList.remove('shadow');
            }
        });


        document.addEventListener('DOMContentLoaded', function () {
            // 定义各测评的题目
            const tests = {
                depression: {
                    title: "抑郁自评量表 (SDS)",
                    questions: [
                        "1. 我感到情绪沮丧，郁闷",
                        "2. 我感到早晨心情最好",
                        "3. 我要哭或想哭",
                        "4. 我夜间睡眠不好",
                        "5. 我吃饭像平时一样多",
                        "6. 我的性功能正常",
                        "7. 我感到体重减轻",
                        "8. 我为便秘烦恼",
                        "9. 我的心跳比平时快",
                        "10. 我无故感到疲劳"
                    ]
                },
                anxiety: {
                    title: "焦虑自评量表 (SAS)",
                    questions: [
                        "1. 我感到比往常更加神经过敏和焦虑",
                        "2. 我无缘无故感到担心",
                        "3. 我容易心烦意乱或感到恐慌",
                        "4. 我感到我可能将要发疯",
                        "5. 我感到事事都很顺利，不会有倒霉的事情发生",
                        "6. 我的四肢经常颤抖和发麻",
                        "7. 我因头痛、颈痛和背痛而烦恼",
                        "8. 我感到无力而且容易疲劳",
                        "9. 我感到很平静，能安静坐下来",
                        "10. 我感到心跳很快"
                    ]
                },
                sleep: {
                    title: "睡眠质量评估 (PSQI)",
                    questions: [
                        "1. 过去一个月内，您通常需要多长时间才能入睡",
                        "2. 过去一个月内，您每晚实际睡眠时间",
                        "3. 您是否有入睡困难（超过30分钟不能入睡）",
                        "4. 您是否有夜间易醒或早醒的情况",
                        "5. 您是否有夜间需要起床去洗手间",
                        "6. 您是否有呼吸不畅的情况",
                        "7. 您是否有咳嗽或打鼾声音很大",
                        "8. 您是否有感到太冷",
                        "9. 您是否有感到太热",
                        "10. 您是否有做噩梦"
                    ]
                },
                satisfaction: {
                    title: "生活满意度评估 (SWLS)",
                    questions: [
                        "1. 我的生活大致符合我的理想",
                        "2. 我的生活条件非常好",
                        "3. 我对我的生活感到满意",
                        "4. 到目前为止，我已经得到了生活中我想要的重要东西",
                        "5. 如果我能重新活过，我几乎不会改变任何事情"
                    ]
                }
            };

            // 绑定开始测评按钮点击事件
            document.querySelectorAll('.start-test').forEach(button => {
                button.addEventListener('click', function (e) {
                    e.preventDefault();
                    const testType = this.getAttribute('data-test');
                    showTestModal(testType);
                });
            });

            // 显示测评弹窗
            function showTestModal(testType) {
                const test = tests[testType];
                const modal = new bootstrap.Modal(document.getElementById('testModal'));

                // 设置标题
                document.getElementById('testModalTitle').textContent = test.title;

                // 生成题目
                const container = document.getElementById('questionsContainer');
                container.innerHTML = '';

                test.questions.forEach((question, index) => {
                    const div = document.createElement('div');
                    div.className = 'mb-3';
                    div.innerHTML = `
                <label class="form-label">${question}</label>
                <div class="btn-group btn-group-toggle w-100" data-toggle="buttons">
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="q${index}" value="1" required> 从不
                    </label>
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="q${index}" value="2"> 有时
                    </label>
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="q${index}" value="3"> 经常
                    </label>
                    <label class="btn btn-outline-primary">
                        <input type="radio" name="q${index}" value="4"> 总是
                    </label>
                </div>
            `;
                    container.appendChild(div);
                });

                // 显示弹窗
                modal.show();
            }

            // 处理测评提交
            document.getElementById('testForm').addEventListener('submit', function (e) {
                e.preventDefault();

                // 计算总分
                let score = 0;
                const inputs = this.querySelectorAll('input[type="radio"]:checked');
                inputs.forEach(input => {
                    score += parseInt(input.value);
                });

                // 显示结果
                alert(`测评已完成！您的总分是: ${score}\n\n结果说明：${getResultExplanation(score)}`);

                // 关闭弹窗
                bootstrap.Modal.getInstance(document.getElementById('testModal')).hide();
            });

            // 根据分数返回解释
            function getResultExplanation(score) {
                if (score <= 20) return "您的状态良好，继续保持";
                else if (score <= 30) return "您可能有轻度问题，建议关注";
                else if (score <= 40) return "您可能有中度问题，建议寻求专业帮助";
                else return "您可能有严重问题，强烈建议寻求专业帮助";
            }
        });
    </script>
</body>

</html>